<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="~{assets/include :: scriptcss('登录日志')}"/>
</head>
<body>
  <div id="app" v-cloak>
    <v-app>
      <!-- 左侧区域::导航菜单 -->
      <th:block th:replace="~{assets/include :: navMenu}"/>

      <!-- 顶部功能区 -->
      <v-app-bar flat>
        <th:block th:replace="~{assets/include :: header}"/>
      </v-app-bar>

      <!-- 主体部分 -->
      <v-main>
        <!-- 主体容器 -->
        <v-container fluid>
          <v-sheet class="rounded-0 px-6 py-3">
            <!-- 查询条件 -->
            <v-form ref="queryForm" class="assist">
              <v-row>
                <v-col cols="12" md="3" lg="3">
                  <v-tree-select v-model="selectedOrgIds" mandatory :items="availableOrgs" :label="$t('机构')" @load="loadAvailableOrgs"></v-tree-select>
                </v-col>
                <v-col cols="12" sm="6" md="3" lg="2">
                  <v-text-field hide-details clearable :label="$t('账号')" v-model="param.loginName"></v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="3" lg="2">
                  <v-select hide-details clearable :label="$t('类型')" v-model="param.type" :items="types"></v-select>
                </v-col>
                <v-col class="text-right">
                  <v-btn size="large" color="primary" class="mr-2" @click="doQuery(1)">{{$t('查询')}}</v-btn>
                  <v-btn size="large" variant="outlined" @click="resetQueryForm(1)">{{$t('重置')}}</v-btn>
                </v-col>
              </v-row>
            </v-form>

            <!-- 数据表格 -->
            <v-card-zoom flat class="mt-3">
              <v-data-table-server
                  ref="dataTable"
                  :loading="loading"
                  :headers="datatable.headers"
                  :items="datatable.items"
                  :items-length="datatable.total"
                  item-value="logId"
                  mobile-breakpoint="md"
                  fixed-header
                  hover
                  class="pagination v-table-fill-height"
                  :style="{'--ty-assist-height': assistHeight}"
                  :page="pagination.page"
                  v-model:items-per-page="pagination.pageSize"
                  @update:options="doQueryTable"
              >
                <template v-slot:item.ip="{item}">
                  {{item.ip}}{{1==item.isLan?('('+$t('局域网')+')'):''}}
                </template>
                <template v-slot:item.type="{value}">
                  {{typesMap[value]}}
                </template>
                <template v-slot:item.operation="{item}">
                  <v-btn-confirm :data="item.logId" @confirm="doDelete">
                    <v-icon color="pink">mdi-close-circle</v-icon>
                  </v-btn-confirm>
                </template>
                <template #bottom="{ pageCount, items }">
                  <v-pagination class="assist pagebar" v-model="pagination.page" :total-visible="pagination.vp" :length="pageCount" :disabled="loading"></v-pagination>
                </template>
              </v-data-table-server>
            </v-card-zoom>
          </v-sheet>

          <!--全屏Loading提示-->
          <v-loading :value="overlay"></v-loading>

          <!-- 权限标识 -->
          <span ref="delPermis" shiro:hasPermission="/log/login/del"></span>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <!-- 导入Vuetify扩展组件 -->
  <th:block th:replace="~{assets/vuetify :: v-loading}"/>
  <th:block th:replace="~{assets/vuetify :: v-card-zoom}"/>
  <th:block th:replace="~{assets/vuetify :: v-btn-confirm}"/>
  <th:block th:replace="~{assets/vuetify :: v-tree-select}"/>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/log/login-log.js?_t=#buildtime#}"></script>
</body>
</html>
